<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>个人中心</title>
		<link rel="stylesheet" type="text/css" href="css/common_samplify.css" />
		<link rel="stylesheet" type="text/css" href="css/personal_info.css" />
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/personal_info.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--
        	描述：头部图片及头像,使用用户微信图像做背景图和头像
        -->
		<div class="bg_snow header">
			<div class="header_info position_relative">
				<!--
                	描述：背景图
                -->
				<img src="img/01.jpg" class="width100" />
				<!--
                	描述：头像，css里设置的背景图
                -->
				<div class="head_img position_absolute">

				</div>
				<!--
                	描述：用户名
                -->
				<p class="position_absolute">您好，夏磊</p>
			</div>
			<!--
            	描述：用户信息导航开始
            -->
			<div class="nav">
				<div class="col-3 coupan">
					<a href="#" class="textdecoration_none color444"><img src="img/coupan.png" class="textdecoration_none color444" />
						<br />我的优惠券</a>
				</div>
				<div class="col-3 coupan">
					<a href="#" class="textdecoration_none color444"><img src="img/mylove.png" />
						<br />我的收藏</a>
				</div>
				<div class="col-3 coupan">
					<a href="#" class="textdecoration_none color444"><img src="img/integral.png" />
						<br />玩转积分</a>
				</div>
				<div class="col-3 coupan">
					<a href="#" class="textdecoration_none color444"><img src="img/browse.png" />
						<br />浏览记录</a>
				</div>
			</div>
		</div>
		<!--
        	描述：推荐开始
        -->
		<div class="bg_snow recommend">
			<div class="text_center color444">
				---最新推荐---
			</div>
			<!--
            	描述：推荐单个内容案例
            -->
			<div class="coupan_info position_relative">
				<!--
                	描述：左侧图片logo
                -->
				<div id="coupan_info" class="coupan_info_left text_center position_absolute">
					<img src="img/05.jpg" class="wh100" />
				</div>
				<!--
                	描述：右侧详细信息
                -->
				<div class="coupan_info_right position_absolute">
					<div class="float_left color444" style="width: 85%;line-height: 30px;">
						高圆圆水饺<br>整点霸王餐<br />活动日期:2017年12月31日
					</div>
					<div class="float_left" style="width: 15%;background-color: #FF3030;">
						抢
					</div>
				</div>
				<div class="coupan_upCol position_absolute">
				</div>
				<div class="coupan_downCol position_absolute">
				</div>
			</div>
		</div>
		<!--
        	描述：模态框，展示推荐详细信息，点高圆圆头像展示，测试用
        -->
		<div class="bg-model">
			<div class="wh100">

			</div>
			<div class='content position_absolute' target='_content'>

			</div>
			<div class="h color444">
				x
			</div>
		</div>
		<!--
		        	描述：底部导航
		        -->
		<div class="position_fix bottom0 bt row width100">
			<div class="col-4 text_center">
				<a href="wx_index.html" class="textdecoration_none color444">首页</a>
			</div>
			<div class="col-4 text_center">
				<a href="personal_info.html" class="text_center color444 textdecoration_none">个人中心</a>
			</div>
			<div class="col-4 text_center">
				<a href="myCoupan.html" class="textdecoration_none color444">我的优惠券</a>
			</div>
		</div>
	</body>

</html>